<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4592735_x8c1jeq7bw9.css">
    <link rel="stylesheet" href="../css/answer.css">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="answer" v-loading.fullscreen.lock="fullscreenLoading" v-cloak>
        <main class="main-centre">
            <div class="main-problem">
                <h1 style="padding-top: 20px">{{problemDto.title}}</h1>
                <div style="height: 80px;display: flex;justify-content: left;align-items: center">
                    <div class="img-box" style="margin:5px;display:inline-block;">
                        <div style="border-radius: 50px">
                            <el-avatar :size="50"
                                       :src="problemDto.questioner.headImage == null ? circleUrl : problemDto.questioner.headImage"></el-avatar>
                            <!--                            <img :src="problemDto.img"-->
                            <!--                                 style="height: 40px;width: 40px;vertical-align:middle;border-radius: 50%">-->
                        </div>
                    </div>
                    <div style="margin: 5px; display:inline-block;width: auto;">
                        <a style="text-align: center;margin: auto">{{problemDto.questioner.username}}</a>
                        <span style="height: 40px;border: 1px solid rgba(0,0,0,0.5);margin: 5px"></span>

                    </div>
                    <div style="display: inline-block;height: 40px;">
                        <span style="color: rgba(0,0,0,0.3);margin: auto 0;">
                            发布于
                            <br>
                            {{problemDto.createTime}}
                        </span>
                    </div>
                    <br>
                </div>
                <div style="padding-bottom: 20px;line-height: 1.5em">
                    {{problemDto.content}}
                </div>
                <div style="padding-bottom: 20px">

                    <el-button slot="reference" @click="user != null ? visible = !visible : $message('请先登入')" type="primary"
                               icon="el-icon-chat-dot-square" plain
                               style="width: 100px;margin-left: 20px;font-size: 16px">回答
                    </el-button>
                    <div  v-show="visible">
                        <span style="font-size: 14px;color:#697682;">回复</span>
                        <el-tag closable :disable-transitions="false" @close="handleClose(tag)"
                                style="background: none;border: none;font-size: 14px">{{problemDto.questioner.username}}
                        </el-tag>
                        <el-input

                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="parentForm.answerContent">
                        </el-input>

                        <el-button style="margin-top: 20px" @click="sendOut" type="primary">发送</el-button>
                    </div>


                </div>
            </div>

<!--            回答div-->
            <div class="main-answer" >
                <div v-for="(parentDto, index) in answerParentDtoList" style="padding: 10px;">
                    <div style="height: 80px;display: flex;justify-content: left;align-items: center">
                        <div class="img-box" style="margin:5px;display:inline-block;">
                            <div style="border-radius: 50px">
                                <el-avatar :size="50"
                                           :src="parentDto.userInfo.headImage == null ? circleUrl : parentDto.userInfo.headImage"></el-avatar>
                                <!--                            <img :src="problemDto.img"-->
                                <!--                                 style="height: 40px;width: 40px;vertical-align:middle;border-radius: 50%">-->
                            </div>
                        </div>
                        <div style="margin: 5px; display:inline-block;width: auto;">
                            <a style="text-align: center;margin: auto">{{parentDto.userInfo.username}}</a>
                            <span style="height: 40px;border: 1px solid rgba(0, 0, 0, .0625);margin: 5px"></span>

                        </div>
                        <div style="display: inline-block;height: 40px;">
                        <span style="color: rgba(0,0,0,0.3);margin: auto 0;">
                            发布于
                            <br>
                            {{parentDto.createTime}}
                        </span>
                        </div>
                        <br>
                    </div>
                    <div style="padding-bottom:5px; line-height: 1.5em;">
                        {{parentDto.answerContent}}
                    </div>
                    <el-button @click="parentClose(index)" type="text" style="color:#697682;padding-bottom:10px;">回复</el-button>
                    <div v-show="parentShow.includes(index)" style="margin-bottom: 20px">
                        <el-input
                                placeholder="请输入内容"
                                v-model.trim="childForm.replyContent"
                                clearable>
                        </el-input>
                        <el-button @click="addChild(parentDto.answerId,parentDto.createUser,index)" style="margin-top: 10px" type="text">发送</el-button>
                    </div>

<!--                    子类显示盒子-->
                    <div class="answer-child" v-if="parentDto.answerChildDtoList.length != 0">
                        <div style="padding: 1rem; display: flex;flex-flow: column;gap: 5px;">
                            <div v-for="(chileDto, i) in parentDto.answerChildDtoList">
                                <div class="child-top">
                                    <a style="color: #1ca9ff;font-weight: bold">{{chileDto.sender.username}}:&nbsp;</a>
                                    <a style="color: #1ca9ff">@{{chileDto.receiver.username}}</a>
                                    <span style="color: #1f252b;line-height: 1.6em;font-size: 14px">{{chileDto.replyContent}}</span>
                                </div>
                                <div class="child-bottom">


                                    <el-button @click="childClose(i)" type="text" style="color:#697682;">回复</el-button>
                                    <span class="chile-span">·</span>
                                    <span style="font-size: 14px;color: #697682;">{{chileDto.createTime}}</span>
                                </div>
                                <div v-show="childShow.includes(i)" style="margin-bottom: 20px">
                                    <span style="font-size: 14px;color:#697682;">回复</span>
                                    <el-tag closable :disable-transitions="false" @close="childClose(i)"
                                            style="background: none;border: none;font-size: 14px">{{chileDto.receiver.username}}
                                    </el-tag>
                                    <el-input
                                            placeholder="请输入内容"
                                            v-model.trim="childForm.replyContent"
                                            clearable>
                                    </el-input>
                                    <el-button @click="addChild(chileDto.answerParentId,chileDto.createUser,i)" style="margin-top: 5px" type="text">发送</el-button>
                                </div>
<!--                                {{chileDto.replyContent}}-->
                            </div>
                        </div>

                    </div>
                    <div v-show="index != answerParentDtoList.length-1" style="box-shadow: 0 0px 1px 0.2px rgba(0,0,0,0.3);;width: 100%;margin: 10px auto;"></div>
                </div>

<!--                <h1>{{problemDto}}</h1>-->
            </div>
            <div class="main-login" style="margin: 0" v-show="user == null">
                <div class="login-top">
                    <span style="font-size: 25px;font-weight: bold">撰写回答</span>
                </div>
                <div class="login-bottom" >
                    <p style="font-size: 25px;font-weight: bold;margin-bottom: 20px">你尚未登录，登录后可以</p>
                    <ul style="list-style: none">
                        <li>
                            <i class="el-icon-check"></i>
                            <span>和开发者交流问题的细节</span>
                        </li>
                        <li>
                            <i class="el-icon-check"></i>
                            <span>关注并接收问题和回答的更新提醒</span>
                        </li>
                        <li>
                            <i class="el-icon-check"></i>
                            <span>参与内容的编辑和改进，让解决方法与时俱进</span>
                        </li>
                    </ul>
                    <el-row style="margin-top: 20px">
                        <el-button  type="primary" @click="loginShow">注册登入</el-button>
                    </el-row>
                </div>
            </div>
        </main>
        
    </div>
</body>
<script src="../js/vue/vue.js"></script>
<script src="../js/axios/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var answer = new Vue({
        el:"#answer",
        data:{


            input:"",
            user:null,
            parentForm:{
                //文本域
                problemId:'',
                answerContent: '',
            },
            childForm:{
                answerParentId:'',
                replyContent:'',
                acceptUser:'',
            },
            //加载动画
            fullscreenLoading:false,

            // input: '',
            //问题显示输入框
            visible:false,
            //父类显示
            parentShow:[],
            //子类显示
            childShow:[],
            temp:{},
            answerParentDtoList:[],
            problemDto:{
                questioner:null,
            },
            timer:null,
            //默认头像
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        },
        methods:{
            //增
            addChild(parentId,userId,index){
                if (this.childForm.replyContent == null || this.childForm.replyContent.length == 0){
                    this.$message.warning("输入内容不能为空");
                    return;
                }
                this.parentShow.splice(this.parentShow.indexOf(index),1)
                this.childShow.splice(this.childShow.indexOf(index),1)
                this.childForm.answerParentId = parentId;
                this.childForm.acceptUser = userId;
                axios.post("http://localhost:8080/hkccommunity/answer/addChild", this.childForm)
                    .then(res =>{
                        if (res.data.code == 2021){
                            this.$message.success(res.data.message);
                            Object.keys(this.childForm).forEach(key => (this.childForm[key] = ''));
                            this.getAnswer();
                        }else {
                            this.$message.warning(res.data.message);
                        }
                    })
                    .catch(err =>{
                        this.$message.error("500 系统出错！！！")
                        console.log(err);
                    })


            },
            sendOut() {
                this.parentForm.problemId = this.problemDto.problemId;
                if (this.parentForm.answerContent == null || this.parentForm.answerContent == ""){
                    this.$message.warning("回答内容不能为空")
                    return;
                }
                this.visible = false;
                axios.post("http://localhost:8080/hkccommunity/answer/addParent", this.parentForm)
                    .then(res => {
                        if (res.data.code == 2021) {
                            this.$message.success(res.data.message);
                            Object.keys(this.parentForm).forEach(key => (this.parentForm[key] = ''));
                            this.getAnswer();
                        }else {
                            this.$message.warning(res.data.message)
                        }
                    })
                    .catch(err => {
                        this.$message.error("500 系统错误！！！")
                        console.log(err)
                    })
            },

            getAnswer(){
                axios.post("http://localhost:8080/hkccommunity/answer/getAnswer",this.temp)
                    .then( res =>{
                        if (res.data.code == 2021){
                            this.problemDto = res.data.data.problemDto;
                            console.log(this.problemDto);
                            this.answerParentDtoList = res.data.data.answerParentDtoList;
                        }
                        else {
                            this.$message.error(res.data.message);
                        }
                    })
                    .catch(err=>{
                        console.log(err);
                    })
            },


            //公共方法
            loginShow(){
                window.parent.postMessage(true, "*");  //data传递的数据，“*”跨域的域名  *代表所有
            },
            //是否登入
            isLogin(){
                axios.get("http://localhost:8080/hkccommunity/login/isLogin")
                    .then(res =>{
                        if(res.data.code == 2021){
                            this.user = res.data.data;

                        }
                    })
                    .catch(err =>{
                        console.log(err);
                    })
            },
            //child回答框打开关闭方法
            childClose(index){
                if(this.user == null){
                    this.$message("请先进行登入操作") ;
                    return;
                }
                if(this.childShow.includes(index)){
                   this.childShow.splice(this.childShow.indexOf(index),1)
                }else {
                    this.childShow.push(index);
                }

            },

            handleMessage(event){
                console.log("启动")
                console.log(event.data);
                this.user = event.data.user;
                this.input = event.data.input;
                // if(this.input != null){
                //     location.href = "problem.html";
                // }
                // console.log(this.user);
                // console.log(event.data);
                // console.log(this.user);
                // if(event.data.input != null && event.data.input != ""){
                //     axios.get("http://localhost:8080/hkccommunity/problem/search?input=" + event.data.input)
                //         .then(res =>{
                //
                //         })
                //         .catch(err =>{
                //             console.log(err);
                //         })
                // }
            },
            parentClose(index){
                if(this.user == null){
                    this.$message("请先进行登入操作") ;
                    return;
                }
                if(this.parentShow.includes(index)){
                    this.parentShow.splice(this.parentShow.indexOf(index),1)
                }else {
                    this.parentShow.push(index);
                }
            },

            handleClose(tag){
                this.visible = false;
            },
        },
        mounted () {
            this.timer = null;
            this.temp =JSON.parse(localStorage.getItem("problemDto"));
            this.fullscreenLoading = true;
            this.getAnswer();
            this.isLogin();
            this.timer = setTimeout(()=>{
                this.fullscreenLoading = false
            },1000);
            window.addEventListener("message", this.handleMessage);

        },
    })
</script>
</html>